<template>
  <div style="margin-top:140px ;" >
        <!--轮播图！！-->
        <div  >
          <div style="width: 1350px;margin:auto">
          <el-carousel indicator-position="outside" type="card">
            <el-carousel-item v-for="item in bannerArr" :key="item">
              <a href="/"><img :src="item.url" style="width: 100%;height: 100%"></a>
            </el-carousel-item>
          </el-carousel>
          </div>
        </div>
      <!--商品列表开始-->
    <div style="width: 1500px;height: 100%;margin: auto">
    <el-row gutter="20" >
      <el-col span="6" v-for="p in productArr">
        <el-card style="margin: 5px auto">
          <a :href="'/index/detail?id='+p.id">
            <img :src="p.url"  style="width:300px; height:360px;" alt="">
          </a>
          <a :href="'/index/detail?id='+p.id">
            <div>
              <p style="font-size: 15px;height: 40px;margin-top: 0">
                {{p.name}}
              </p>
              <p style="font-size: 12px;color: #666">
                ￥{{p.price}} <s>原价：{{p.oldPrice}}</s>
                <span style="float: right">销量:{{p.saleCount}}</span>
              </p>
            </div>
          </a>
        </el-card>
      </el-col>
    </el-row>
    </div>
    </div>
</template>
<script>


export default {
  data: function () {
    return {
      bannerArr: [],
      categoryArr: [],
      activeIndex:"1",
      productArr:[{
        name:"",
        price:"",
        oldPrice:"",
        url:"",
        keyword:"",
        saleCount: ""
      },]
    }
  },
  methods:{
    search(){
      this.keyword = this.$route.query.keyword;
      console.log("11111111111111"+this.keyword)
      console.log(this.keyword)
      let url="http://localhost:8090/product/listByProduct/"+this.keyword;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        let responseBody=response.data;
        if(responseBody.state==20000){
          this.productArr=responseBody.data
          console.log(this.productArr);
        }else {
          this.$message.error("没有找到该商品");
        }
      })
    },
    listbanner(){
      let url='http://localhost:8090/banner';
      console.log('url=:'+url);
      this.axios.get(url).then((response)=>{
        let responseBody = response.data;
        console.log(responseBody);
        this.bannerArr = responseBody.data;
      })
    },
  },
  created() {
    this.listbanner();
    this.search();
  }
}
</script>